<template>
    <div class="shop-container">
      <el-menu
        :default-active="$route.path"
        mode="horizontal"
        class="sub-menu"
      >
        <el-menu-item index="/shop/products">商品列表</el-menu-item>
        <el-menu-item index="/shop/cart">购物车</el-menu-item>
      </el-menu>
      
      <router-view />
    </div>
  </template>
  
  <script setup>
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  
  // 监听路由变化保持菜单高亮
  router.afterEach((to) => {
    const menu = document.querySelector('.sub-menu')
    if (menu) {
      menu.querySelectorAll('el-menu-item').forEach(item => {
        item.classList.toggle('is-active', item.index === to.path)
      })
    }
  })
  </script>
  
  <style scoped>
  .shop-container {
    padding: 20px;
  }
  
  .sub-menu {
    margin-bottom: 20px;
    border-bottom: 2px solid #f5f7fa;
  }
  </style>